<template>
  <div class="app-container"  align="center">
    <el-collapse  v-for="(data,index) in allmade" :key="data.maddr"  v-model="activeNames"
                   style="margin-left: 50px;margin-right: 100px;">
      <el-collapse-item   :title="data.maddr"  :name="data.maddr">

<!--        <el-button style="vertical-align: 0px;display: inline-block" type="danger" size="mini" v-if="data.warning" icon="el-icon-warning" @click="clearmovie(data.maddr)"-->
<!--                   round>-->

<!--      test  </el-button>-->
<!--        <img src="../../assets/move.png" v-if="data.warning" style="width: 32px;height:32px"  @click="clearmovie(data.maddr)">-->

        <div v-for="o in data.slaveList" :key="o.saddr" style="display: inline-block;margin-left: 10px;">

          <el-button type="info" size="mini" v-if="o.slave_dropout" round>地址：{{o.saddr}}</el-button>
          <el-button type="success" size="mini" v-if="o.slave_dropout === false" round>地址：{{o.saddr}}</el-button>

<!--            <el-tag  effect="light" > 地址：{{o.saddr}}</el-tag>&nbsp;&nbsp;&nbsp;&nbsp;-->
            <el-tag   effect="plain">
              温度：{{o.temperature }}℃
            </el-tag>&nbsp;&nbsp;&nbsp;&nbsp;

            <el-tag type="warning"      effect="dark">
              湿度：{{o.humidity}}RH%
            </el-tag>

          <img src="../../assets/drop.png" v-if="o.slave_dropout" style="width: 32px;height:32px"
             >
          <img src="../../assets/move.png" v-if="o.move_warning" style="width: 32px;height:32px">
<!--          @click="clearmovie(data.maddr)"-->
          <img src="../../assets/dooropen.png" v-if="o.door_address_warning" style="width: 32px;height: 32px;vertical-align: -8px">
<!--               @click="cleardoor(data.maddr,o.door_address)"-->

          <img src="../../assets/temperature_device_warning.png" v-if="o.temperature_device_warning"
               style="width: 32px;height:32px"  >
<!--           @click="temperaturewaring(data.maddr,o.saddr)"-->
          <img src="../../assets/move_device_warning.png" v-if="o.move_device_warning"
               style="width: 32px;height:32px" >
<!--          @click="moviewaring(data.maddr,o.saddr)"-->
          <div style="display: inline"  v-if="o.batterycapacity > 80" >
<!--              <el-progress :text-inside="true" :stroke-width="30" :percentage="o.batterycapacity"-->
<!--                           ></el-progress>-->
            <el-progress :width="40"  type="circle" :percentage="o.batterycapacity" status="success" > </el-progress>
          </div>
          <div style="width: 50px;display: inline-block" v-else-if="o.batterycapacity > 30">
<!--            <el-progress :text-inside="true" :stroke-width="30" :percentage="o.batterycapacity"  status="success"-->
<!--            ></el-progress>-->
            <el-progress :width="40"  type="circle" :percentage="o.batterycapacity "  > </el-progress>

          </div>
          <div style="width: 50px;display: inline-block" v-else>
<!--            <el-progress :text-inside="true" :stroke-width="30" :percentage="o.batterycapacity"  status="exception"-->
<!--            ></el-progress>-->
            <el-progress :width="40"  type="circle" :percentage="o.batterycapacity " status="exception" > </el-progress>

          </div>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <br><br>
        </div>


        <br>




        <div v-for="d in data.doorList" :key="d.did" style="display: inline-block;margin-left: 20px" >

          &nbsp;&nbsp; <span>门:{{d.door_address}}</span>&nbsp;&nbsp;
          <el-switch

            v-if="d.type==='1'"
            active-color="#E6A23C"
            inactive-color="#ff4949"
            v-model="d.sw"
            @change=changedoor(data.maddr,d.door_address,d.sw,d.type)
          >
          </el-switch>
          <el-switch
            v-if="d.type ==='2'"
            active-color="#13ce66"
            inactive-color="#dadde5"

            v-model="d.sw"

            @change=changedoor(data.maddr,d.door_address,d.sw,d.type)
          >
          </el-switch>

<!--          <el-button style="vertical-align: 5px" type="danger" size="mini" v-if="d.warning" icon="el-closeswitch" @click="cleardoor(data.maddr,d.door_address)" circle>-->

<!--          </el-button>-->
          <img src="../../assets/dooropen.png" v-if="d.warning" style="width: 32px;height: 32px;vertical-align: -8px"  >
<!--          @click="cleardoor(data.maddr,d.door_address)"-->
        </div>

        <div></div>
        <br>
        <div v-for="l in data.lampList" :key="l.rid"  style="display: inline-block;margin-left: 60px;width: 190px" >


          <el-slider
            v-model="l.bright"
            @change="changelamp(data.maddr,l.lamp_address,l.bright)"
          > </el-slider>
          <span> 灯:{{l.rid}}</span>

        </div>


        <div></div>
        <br>
        <div v-for="r in data.relayList" :key="r.yid"  style="display: inline-block;">
          &nbsp;&nbsp; <span>开关:{{r.relay_address}}</span>&nbsp;&nbsp;
          <el-switch
            v-model="r.sw"
            active-color="#E6A23C"
            @change="changeother(data.maddr,r.relay_address, r.sw)"
            inactive-color="#DCDFE6"
            :active-value="1"
            :inactive-value="0"
          ></el-switch>
          &nbsp;&nbsp;

        </div>
        <br>

      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
  import {allmd,findMaster} from '@/api/master'
  import {doorSwitch,deviceLamp,otherSwitch,findSwitch,findLamp,findRelay,clearDoor,clearMovie,
    clearTemperatureWaring,clearMoviewaring}
                                        from '@/api/device'
  import {socketSend,socketConnect} from '@/api/websocket'
  import { showLoading, hideLoading } from '@/api/loading'


  export default {
    provide () {
      return {
        reload: this.reload
      }
    },
    data() {
      return {
        activeNames: ['01','02','03','04','05','06'],//折叠面板

        isRouterAlive: true,
        allmade:[],
        timer:null,
        lamptimer:null,
        relaytimer:null,

        master: null,
        door:null,
        lamp: null,
        relay: null,

        fullscreenLoading: false


      }
    },
    mounted() { // 页面加载时默认加载的函数
      this.getallmade();

    },
    methods: {
      changedoor (maddr,door_address,sw,type) {//询问门是否打开
          console.log('开关门地址 ' + maddr + "  " + door_address)
        this.$confirm('此操作将打开/关闭门, 是否继续?', '提示', {

          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          showLoading(29)

          doorSwitch(maddr,door_address,sw,type)
          //定时轮询
          var s = 0;//设置轮询次数
          this.timer = window.setInterval(() => {//定时器
              this.getDoor(maddr,door_address)
               s++
              console.log("找到的开关 "+this.door.sw +"   "+sw + "  "+ s)
              if (this.door.sw == sw){
                hideLoading();

                clearInterval(this.timer);
                if(sw){
                  this.$message.success('打开成功!')
                }else{
                  this.$message.success('关闭成功')
                }
                this.getallmade()
              }

              if(s > 30){
                hideLoading();

                clearInterval(this.timer);
                if(sw){
                  this.$message.error('打开门失败!')
                }else{
                  this.$message.error('关闭门失败')
                }
                this.getallmade()
              }
          },1000)


        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消打开'
          });
        });
      },

      changelamp(maddr,lamp_address,lamp){
        deviceLamp(maddr,lamp_address,lamp)
        showLoading(5)

        if(lamp ==100)
          lamp =99;
        var  ls = 0;
        this.lamptimer = window.setInterval(() => {//定时器
           this.getLamp(maddr,lamp_address)
           ls++;
            console.log("找到的灯 "+this.lamp.bright +"   "+ls)
            if (this.lamp.bright == lamp){
              hideLoading();

              clearInterval(this.lamptimer);
              this.$message.success('灯亮度调节成功')
              this.getallmade()
            }

            if(ls > 5) {
              hideLoading();

              clearInterval(this.lamptimer);
              this.$message.error('灯亮度调节失败')
              this.getallmade()
            }

        },1000)

      },
      changeother(maddr,relay_address,sw) {//询问门是否打开

        this.$confirm('此操作将打开/关闭继电器, 是否继续?', '提示', {

          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          showLoading(5)

          otherSwitch(maddr,relay_address,sw)

          //定时轮询
          var s = 0;//设置轮询次数
          this.relaytimer = window.setInterval(() => {//定时器
            this.getRelay(maddr,relay_address)
            s++
            // console.log("找到的开关 "+this.relay.sw +"   "+sw + "  "+ s)
            if (this.relay.sw == sw){
              hideLoading();

              clearInterval(this.relaytimer);
              if(sw){
                this.$message.success('打开成功!')
              }else{
                this.$message.success('关闭成功')
              }
              this.getallmade()
            }

            if(s > 5){
              hideLoading();
              clearInterval(this.relaytimer);
              if(sw){
                this.$message.error('打开失败!')
              }else{
                this.$message.error('关闭失败')
              }
              this.getallmade()
            }
          },1000)

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消打开'
          });
        });
      },


      async getallmade() {
        const { data } = await allmd()
        this.allmade = data
      },
      async getDoor(maddr,door_address) {
        const { data } = await findSwitch(maddr,door_address)
        this.door = data
       // console.log('请求到的门' + '  ' +data.sw + '  ' + data)
        // this.total = data.total
      },
      async getMaster(maddr) {
        const { data } = await findMaster(maddr)
        this.master = data
         console.log('请求到的网关  ' + '  ' + this.master.sw + '  ' + this.master.maddr)
        // this.total = data.total
      },
      async getLamp(maddr,lamp_address) {
        const { data } = await findLamp(maddr,lamp_address)
        this.lamp = data
        //console.log('请求到的灯' + '  ' +data.bright+ '  ' + data)
      },
      async getRelay(maddr,relay_address) {
        const { data } = await findRelay(maddr,relay_address)
        this.relay = data
      },

      cleardoor(maddr,door_address) {//询问解除警报
          this.$confirm('是否解除门报警, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {

            showLoading("进行中")
            console.log("门地址" +maddr +"  "+ door_address)
            clearDoor(maddr,door_address)
            //定时轮询
            var s = 0;//设置轮询次数
            this.wtimer = window.setInterval(() => {//定时器
              this.getDoor(maddr,door_address)
              s++
              if (!this.door.warning){
                hideLoading();

                clearInterval(this.wtimer);

                this.$message.success('解除报警成功!')

                this.door =[];
                console.log("menmen "+this.door.warning)

                this.getallmade()

              }

              if(s > 6){
                hideLoading();
                clearInterval(this.wtimer);
                this.$message.error('解除报警失败!')

                this.getallmade()
              }
            },1000)


          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消解除报警!'
            });
          });
      },

      clearmovie(maddr) {//询问解除警报
        this.$confirm('是否解除移动报警, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          showLoading("解除移动报警中")
          console.log("网关" +maddr)
          clearMovie(maddr)
          //定时轮询
          var s = 0;//设置轮询次数
          this.wtimer = window.setInterval(() => {//定时器

             this.getMaster(maddr)//这儿还没请求到数据，都继续往下执行了

            s++
            if (!this.master.warning){
              console.log("lalalalla "+ this.master.warning)

              hideLoading();
              clearInterval(this.wtimer);

              this.$message.success('解除移动报警成功!')
              this.master =[];
              console.log("menmen "+this.master.warning)
              this.getallmade()

            }
            if(s > 5){
              hideLoading();
              clearInterval(this.wtimer);

              this.$message.error('解除移动报警失败!')

              this.master =[];
              console.log("menmen "+this.master.warning)

              this.getallmade()
            }

          },1000)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消解除报警!'
          });
        });
      },

      temperaturewaring(maddr,saddr) {
        clearTemperatureWaring(maddr,saddr);
      },
      moviewaring(maddr,saddr){
        clearMoviewaring(maddr,saddr);
      },
      handleChange(val) {//折叠面板
        console.log(val);
      },

      customColorMethod(percentage) { //进度条颜色
        console.log("zhi  "+ percentage)
        if (percentage < 30) {
          return 'exception';
        } else if (percentage < 70) {
          return 'warning';
        } else {
          return 'success';
        }
      },
    },

    beforeDestroy(){
      clearInterval(this.timer);
      clearInterval(this.lamptimer);
      clearInterval(this.wtimer);

      this.timer = null;
      this.lamptimer = null;
      this.relaytimer = null;
      this.wtimer =null;
    }


  }


</script>


<style>
  /*.text item{*/
  /*  font-size: 28px;*/
  /*  margin-bottom: 18px;*/
  /*}*/

  .text_item{
    font-size: 14px;
    /*margin-bottom: 18px;*/
  }
  .text_item .nelrow{
    height: 100%;
  }
  /*.item {*/
  /*  */
  /*}*/

  /*.text item circle{*/
  /*  margin-top: 20px;*/
  /*}*/

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 420px;
    height: 550px;
  }

  .el-row {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap
  }
  .card-panel-icon {
    float: left;
    font-size: 28px;
  }
</style>
